<template>
  <div class="shop-detail">
    <div style="display: flex; justify-content: center">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item index="/Shop">热门商店</el-menu-item>
        <el-menu-item index="/MyCollect">我的收藏</el-menu-item>
        <el-menu-item index="/ShoppingCart">购物车</el-menu-item>
        <el-menu-item index="/OrderCenter">订单中心</el-menu-item>
      </el-menu>
    </div>
    <br>
    <!-- 店铺信息 -->
    <div class="shop-info">
      <img :src="shopData.imageUrl" alt="店铺图片" class="shop-image"/>
      <h1>{{ shopData.name }}</h1>
      <p>{{ shopData.description }}</p>
      <p>联系电话: {{ shopData.phone }}</p>
      <p>邮箱: {{ shopData.email }}</p>
    </div>

    <el-divider>产品列表</el-divider>

    <!-- 产品列表 -->
    <div class="product-list">
      <div class="products">
        <div v-for="product in products" :key="product.id" class="product-item"
             @click="handleProductDetail(product.id)">
          <img :src="product.imageUrl" alt="产品图片" class="product-image"/>
          <h3>{{ product.name }}</h3>
          <p>价格: ¥{{ product.price }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {queryProductByShop, queryShopById} from "@/api/request/ShopRequest";

export default {
  name: "ShopDetail",
  data() {
    return {
      id: this.$route.query.id,
      activeIndex: '/Shop',
      shopData: {},
      products: []
    };
  },
  methods: {
    handleProductDetail(productId) {
      this.$router.push({
        path: '/ProductDetail',
        query: {
          id: productId
        }
      });
    },
    getShopDetail() {
      queryShopById(this.id).then(res => {
        this.shopData = res
        queryProductByShop(res.id).then(res => {
          this.products = res
        })
      })
    },
    handleSelect(key) {
      this.$router.push(key);
    },
  },
  mounted() {
    this.getShopDetail()
  }
};
</script>

<style lang="scss" scoped>
.shop-detail {
  padding-top: 93px;
  max-width: 1200px;
  margin: 0 auto;

  .shop-info {
    text-align: center;
    margin-bottom: 30px;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

    .shop-image {
      width: 200px;
      height: 200px;
      border-radius: 10px;
      margin-bottom: 15px;
      border: 2px solid #ddd;
    }

    h1 {
      font-size: 24px;
      margin-bottom: 10px;
      color: #333;
    }

    p {
      font-size: 16px;
      color: #666;
      margin: 5px 0;
    }
  }

  .el-divider {
    margin: 20px 0;
    background-color: #ddd;
  }

  .product-list {
    .products {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      padding: 20px;

      .product-item {
        cursor: pointer;
        width: calc(25% - 20px);
        text-align: center;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        overflow: hidden;

        &:hover {
          transform: translateY(-5px);
          box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        }

        .product-image {
          width: 100%;
          height: 150px;
          object-fit: cover;
          border-radius: 10px 10px 0 0;
        }

        h3 {
          font-size: 18px;
          margin: 10px 0 5px;
          color: #333;
        }

        p {
          font-size: 16px;
          color: #e74c3c;
          font-weight: bold;
          margin-bottom: 15px;
        }
      }

      @media (max-width: 1200px) {
        .product-item {
          width: calc(33.33% - 20px);
        }
      }

      @media (max-width: 768px) {
        .product-item {
          width: calc(50% - 20px);
        }
      }

      @media (max-width: 480px) {
        .product-item {
          width: 100%;
        }
      }
    }
  }
}
</style>
